import Vue from 'vue'
import Loading from './loading.vue'

/**
 * Vue.extend 接受参数并返回一个构造器，new 该构造器可以返回一个组件实例
 * 当我们 new Mask() 的时候，把该组件实例挂载到一个 div 上
 **/
const Mask = Vue.extend(Loading)

Vue.directive("commentLoading", {
	//第一次绑定到元素时调用
  bind: function (el, binding) {
    const mask = new Mask({
      el: document.createElement('div'),
      data () {}  // 这里可以写组件data
    })
    //用一个变量接住mask实例
    el.instance = mask
    el.mask = mask.$el
    // el.instance.list   // 获取组件的data list
    // el.originalPosition = el.style.position;
    // if (!el.originalPosition) {
    //   el.style.position = "relative";
    // }
		binding.value && el.appendChild(el.mask);
  },
  //所在组件的 VNode 更新时调用--比较更新前后的值
  update: function (el, binding) {
    if (binding.oldValue !== binding.value) {
      // if (!el.originalPosition) {
      //   el.style.position = "";
      // }
			el.removeChild(el.mask);
    }
  },
  //指令与元素解绑时调用
  unbind: function (el, binding) {
    el.instance && el.instance.$destroy()
  }
})
